<!-- 搜索栏 -->
<form nz-form [formGroup]="searchForm" class="ant-advanced-search-form">
    <div nz-row [nzGutter]="24" style="white-space: nowrap">
        <div nz-col [nzSpan]="6">
            <div nz-row>
                <nz-form-label nzFor="menuName">权限名称</nz-form-label>
                <nz-form-control>
                    <input nz-input formControlName="menuName" placeholder="输入权限名" id="menuName" />
                </nz-form-control>
            </div>
        </div>
        <div nz-col [nzSpan]="6">
            <div nz-row>
                <nz-form-label nzFor="perms">权限字符</nz-form-label>
                <nz-form-control>
                    <input nz-input formControlName="perms" placeholder="输入权限字符" id="perms" />
                </nz-form-control>
            </div>
        </div>
        <div nz-col [nzSpan]="12">
            <div nz-row nzJustify="end">
                <nz-col>
                    <app-search-button [search]="true" (searchEvent)="onSearch()" [reset]="true"
                        (resetEvent)="onReset()" [create]="false"></app-search-button>
                </nz-col>
            </div>
        </div>
    </div>
</form>

<div nz-row style="margin-top: 4px; white-space: nowrap;">
    <nz-table #expandTable nzShowPagination [nzData]="clientMenus" 
        nzTableLayout="fixed" [nzFrontPagination]="false"
        [nzPageIndex]="pageIndex" [nzPageSize]="pageSize" [nzTotal]="total" 
        (nzQueryParams)="onPageParamChange($event)">
        <thead>
            <tr>
                <th>权限ID</th>
                <th>权限名称</th>
                <th>权限字符</th>
                <th>权限类型</th>
            </tr>
        </thead>

        <tbody>
            <tr *ngFor="let roleMenu of clientMenus">
                <td>{{roleMenu.menuId}}</td>
                <td>{{roleMenu.menuName}}</td>
                <td>{{roleMenu.perms}}</td>
                <td>{{roleMenu.menuTypeName}}</td>
            </tr>
        </tbody>
    </nz-table>
</div>